<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Suppablog - Minimal Blog Html Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Template by Colorlib" />
        <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
        <meta name="author" content="Colorlib" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        {% load static %}
        <link rel="shortcut icon" href="{% static 'images/favicon.png' %}" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7CLibre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css"  href='{% static "css/clear.css" %}' />
        <link rel="stylesheet" type="text/css"  href='{% static "css/common.css" %}' />
        <link rel="stylesheet" type="text/css"  href='{% static "css/font-awesome.min.css" %}' />
        <link rel="stylesheet" type="text/css"  href='{% static "css/carouFredSel.css" %}' />
        <link rel="stylesheet" type="text/css"  href='{% static "css/sm-clean.css" %}' />
        <link rel="stylesheet" type="text/css"  href='{% static "css/style.css" %}' />

        <!--[if lt IE 9]>
                <script src="{% static 'js/html5.js' %}"></script>
        <![endif]-->

    </head>


    <body class="single-post">

        <!-- Preloader Gif -->
        <table class="doc-loader">
            <tbody>
                <tr>
                    <td>
                        <img src="{% static 'images/ajax-document-loader.gif' %}" alt="Loading...">
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Left Sidebar -->
        <div id="sidebar" class="sidebar">
            <div class="menu-left-part">
                <div class="search-holder">
                    <label>
                        <input type="search" class="search-field" placeholder="Type here to search..." value="" name="s" title="Search for:">
                    </label>
                </div>
                <div class="site-info-holder">
                    <div class="site-title">Suppablog</div>
                    <p class="site-description">
                        Suppablog is simple and yet cool wordpress theme to lorem ipsum dolor sit.
                    </p>
                </div>
                <nav id="header-main-menu">
                    <ul class="main-menu sm sm-clean">
                        <li><a href="{% url 'index' %}" class="current">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="scroll.html">Scroll</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
                <footer>
                    <div class="footer-info">
                        © 2018 SUPPABLOG HTML TEMPLATE. <br> CRAFTED WITH <i class="fa fa-heart"></i> BY <a href="https://colorlib.com">COLORLIB</a>.
                    </div>
                </footer>
            </div>
            <div class="menu-right-part">
                <div class="logo-holder">
                    <a href="{% url 'index' %}">
                        <img src="{% static 'images/logo.png' %}" alt="Suppablog WP">
                    </a>
                </div>
                <div class="toggle-holder">
                    <div id="toggle">
                        <div class="menu-line"></div>
                    </div>
                </div>
                <div class="social-holder">
                    <div class="social-list">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-vimeo"></i></a>
                        <a href="#"><i class="fa fa-behance"></i></a>
                        <a href="#"><i class="fa fa-rss"></i></a>
                    </div>
                </div>
                <div class="fixed scroll-top"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Single Content -->
        <div id="content" class="site-content center-relative">
            <div class="single-post-wrapper content-1070 center-relative">

                <article class="center-relative">
                    <h1 class="entry-title">
                        {{ post.title }}
                    </h1>
                    <div class="post-info content-660 center-relative">
                        <div class="cat-links">
                            <ul>
                                <li><a href="#">
                                    {% for c in post.category.all%}
                                        {{ c }}
                                    {% if not forloop.last %}
                                        ,
                                    {% endif %}
                                    {% endfor %}
                                </a></li>
                            </ul>
                        </div>
                        <div class="entry-date published">{{ post.creatDate }}</div>
                        <div class="clear"></div>
                    </div>

                    {% if post.title_image %}
                    <div class="post-full-width">
                        <img src="{{ post.title_image.url }}" alt="">
                    </div>
                    {% endif %}
                    <div class="entry-content">
                        <div class="content-wrap content-660 center-relative">
                            {{ post.content }}
                            <div class="clear"></div>
                        </div>

                    </div>
                    <div class="clear"></div>
                </article>
            </div>
        </div>



        <!--Load JavaScript-->
        <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
        <script type='text/javascript' src='{% static "js/imagesloaded.pkgd.js" %}'></script>
        <script type='text/javascript' src='{% static "js/jquery.nicescroll.min.js" %}'></script>
        <script type='text/javascript' src='{% static "js/jquery.smartmenus.min.js" %}'></script>
        <script type='text/javascript' src='{% static "js/jquery.carouFredSel-6.0.0-packed.js" %}'></script>
        <script type='text/javascript' src='{% static "js/jquery.mousewheel.min.js" %}'></script>
        <script type='text/javascript' src='{% static "js/jquery.touchSwipe.min.js" %}'></script>
        <script type='text/javascript' src='{% static "js/jquery.easing.1.3.js" %}'></script>
        <script type='text/javascript' src='{% static "js/main.js" %}'></script>
    </body>
</html>
